<template>
  <div>
    <!-- 这里的判断要根据是管理员角色还是老师角色显示不同的内容 -->
    <el-dialog
      v-model="dialogVisible"
      title="关联"
      width="700"
      class="my_dialog"
    >
      <template #header>
        <div class="designDialogHead">
          <p>关联</p>
        </div>
      </template>
      <div class="designContent">
        <div class="left">
          <div class="search">
            <el-input
              @keyup.enter="searchMaterial"
              @clear="onClearInput"
              clearable
              v-model.trim="materialOption.name"
              style="max-width: 600px"
              placeholder="请输入搜索内容"
            >
              <template #append
                ><el-button @click="searchMaterial" type="primary"
                  >搜索</el-button
                ></template
              >
            </el-input>
          </div>
          <div class="designList" v-loading="loading">
            <SelectMater
              @onRadioChange="onRadioChange"
              v-model:materialData="materialData"
            />
          </div>

          <div class="pageOut">
            <el-pagination
              layout="prev, pager, next"
              :total="materialTotal"
              :page-size="materialOption.page_size"
              @currentChange="currentChange"
              hide-on-single-page
            />
          </div>
        </div>

        <div class="right">
          <div class="rightTit">已选择</div>
          <div
            v-for="(item, index) in selectMaterialArr"
            class="selectItem"
            :key="index"
          >
            <template v-if="item != undefined">
            
              <div class="row">
                <p>{{ giveEllipsisStr1(item.name, 10) }}</p>
                <div @click="closeMaterial(index)" class="close">×</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel">取消</el-button>
          <el-button
            type="primary"
            @click="addDesign"
            :disabled="dialogDisabled"
          >
            确认关联
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import { materialList ,addMaterialFill} from "@/api/material";
import SelectMater from "./SelectMater.vue";
import { giveEllipsisStr1, getFileHzm } from "@/utils/common";
import { ElMessage } from "element-plus";
import { counterStore } from "@/store/modules/counter";
const courseStatus = sessionStorage.getItem("status");
const store = counterStore();
const subsection = ref();
//关联菜单选项值
const tabIdx = ref(0);
const loading = ref(true);
const materialData = ref([]); //素材列表
const dialogDisabled = ref(false);
const emits = defineEmits(['addSuccess']);
const props=defineProps({
  pdfArr:Array
})


//获取素材的基础素材
const materialOption = ref({
  //素材列表查询条件
  name: "",
  t: 1,
  bk_id: store.bkItem.id,
  page_size: 100,
  page_num: 1,
});

const dialogVisible = ref(false);
// 选中素材之后的数组
const selectMaterialArr = ref([]);

console.log(props.pdfArr);

watch(
  materialData,
  (nv) => {
    console.log(nv);
    // 选中素材之后添加chechecd标记
    let find = nv.find((item) => item.checked);

    if (find) {
        selectMaterialArr.value[0] = find;   
    }
  },
  { deep: true }
);

//打开dialog弹框，由外部组件触发该方法
const openDialog = async (e) => {
  tabIdx.value = 0;
  materialOption.value.name = "";
  dialogDisabled.value = false;
  dialogVisible.value = true;
  materialData.value = [];
  await getMaterialList()
  buildLeftOriginalMaterial()
};


// 获取已选择的资料
const getTeachDesignDetail = async () => {

  await materialList({
        t:3,
        page_num:1,
        page_size:100,
        bk_id:counterStore().bkItem.id,

    }).then(res=>{
       
      selectMaterialArr.value=res.list

      
    })

}


// 将已选择的和获取的素材进行比对，添加checked标记
const buildLeftOriginalMaterial = () => {
  console.log(materialData.value);
  console.log(selectMaterialArr.value);
  materialData.value.forEach((item, index) => {
    selectMaterialArr.value.forEach((find) => {
      if (item.file_id == find.file_id) {
        materialData.value[index].checked = true;
      }
    });
  });
};
const onRadioChange = (e) => {
  console.log(e);
};

//获取素材列表
const getMaterialList = async () => {
  loading.value = true;
  let res = await materialList(materialOption.value);
  loading.value = false;
  materialData.value = res.list;

};


// 删除选中的素材
const closeMaterial = (index) => {
  materialData.value.forEach((item, idx) => {
    if (selectMaterialArr.value[index].id == item.id) {
      item.checked = false;
    }
  });
  selectMaterialArr.value.splice(index, 1);
};

// 点击教学设计中的搜索
const searchMaterial = () => {
  getMaterialList();
};

// 点击清空搜索框中的内容
const onClearInput = () => {
  getMaterialList();
};

// 页码改变事件
const currentChange = (e) => {
  materialOption.value.page_num = e;
  getMaterialList();
};

// 确定关联
const addDesign = () => {
  //判断关联资料是不是没有任何选择
  if (selectMaterialArr.value.every((item) => !item))
    return ElMessage.error("文件不能为空");
    dialogDisabled.value = true;
    dialogVisible.value = false;
   
    let data={
      name:selectMaterialArr.value[0].name,
      t:3,
      file_id:selectMaterialArr.value[0].file_id,
      bk_id:selectMaterialArr.value[0].bk_id

    }

    addMaterialFill(data).then(res=>{
        console.log(res); 
        if(!res){
          ElMessage.success("关联成功")
          emits('addSuccess')
        }else{
          ElMessage.error(res.response.data)
        }
    })

    
   
};


// 点击取消
const onCancel=()=>{
  dialogVisible.value=false
  selectMaterialArr.value=[]

}

defineExpose({
  openDialog,
  closeMaterial
});

getTeachDesignDetail()
</script>

<style lang="scss" scoped>
.designContent {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  min-height: 400px;
  display: flex;

  .left {
    padding: 0 20px 20px 20px;
    width: 480px;
    border-right: 1px solid #eee;
    min-height: 400px;



    .search {
      margin: 20px 0;
    }

    .radioGroup {
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: 30px;

        .infoLeft {
          display: flex;
          align-items: center;

          span {
            margin-left: 5px;
          }
        }

        .infoRight {
          color: #999;
          font-size: 12px;
        }
      }
    }

    .pageOut {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .el-radio.el-radio--large {
      width: 100%;
    }

    .el-radio-group {
      display: block;
    }
  }

  .right {
    padding: 20px;
    width: 220px;
    min-height: 400px;

    .rightTit {
      font-size: 18px;
      color: #000;
      margin-bottom: 30px;
    }

    .selectItem {
      margin-bottom: 15px;

      span {
        font-size: 14px;
        color: #999;
      }

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;

        p {
        }

        .close {
          width: 16px;
          height: 16px;
          background: #ccc;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 16px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
